<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fashionist--index</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="Shortcut Icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/index.js"></script>
</head>
<body class="index">
    <div class="head clear">
        <div class="head_wrap">
            <div class="logo">
                <a href="#"><img src="images/logo.png" alt="网站logo"></a>
            </div>
            <ul class="nav_item">
                <li><a href="index.html">HOME</a></li>
                <li><a class="nav_more_item" href="javascript:void(0)">PAGES</a>
                    <ul class="second_nav">
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="portfolio.html">PRODUCT</a></li>
                        <li><a href="portfolio.html">PRODUCT</a></li>
                        <li><a href="portfolio.html">PRODUCT</a></li>
                    </ul>
                </li>
                <li>
                    <a class="nav_more_item" href="shop_list.html">SHOP</a>
                    <ul class="second_nav">
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">women's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                    </ul>
                </li>
                <li>
                    <a class="nav_more_item" href="about.html">about</a>
                    <ul class="second_nav">
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">women's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                        <li><a href="#">men's wear</a></li>
                    </ul>
                </li>
                <li><a href="blog_single.html">BLOG</a></li>
                <li><a href="contact_us.html">CONTACT</a></li>
            </ul>
            <div class="search_wrap">
                <form>
                    <input type="text" placeholder="Please input..." name="commit">
                    <button type="submit"></button>
                </form>
            </div>
        </div>
    </div>
     <!-- 控制二级菜单显示的js代码 -->
    <script>
        $(document).ready(
            function(){
                $(".nav_item li").hover(function(){
                    $(this).find(".second_nav").stop().slideDown();
                    },function(){
                    $(this).find(".second_nav").stop().slideUp();
                });
            }
        );
    </script>
    <!-- head结束 -->
    <!-- banner开始 -->
    <div class="banner clear">
         <!-- Swiper -->
        <div class="swiper-container swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/banner.jpg" alt="banner01"></div>
                <div class="swiper-slide"><img src="images/banner.jpg" alt="banner01"></div>
                <div class="swiper-slide"><img src="images/banner.jpg" alt="banner01"></div>
                <div class="swiper-slide"><img src="images/banner.jpg" alt="banner01"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination1"></div>
        </div>     
    </div>
    <!-- banner结束 -->
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
     <!-- Initialize Swiper -->
    <script>
            var swiper = new Swiper('.swiper1', {
                pagination: {
                el: '.swiper-pagination1',
                },
                loop: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                }
            });
           
        </script>
    <!-- Collections开始 -->
    <div class="collection clear">
        <div class="collection_right">
            <h3>Latest Collections</h3>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
            <span>OUR BRANDS &amp; MARKS</span>
            <i>
                <img src="images/collect_pic_01.png" alt="商标1">
                <img src="images/collect_pic_02.png" alt="商标1">
                <img src="images/collect_pic_03.png" alt="商标1">
                <img class="m_right" src="images/collect_pic_04.png" alt="商标1">
            </i>
            <div class="collection_left">
                <div class="collect_border">
                </div>
                <div class="swiper-container swiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/show_pic_07.jpg" alt="图1"></div>
                        <div class="swiper-slide"><img src="images/show_pic_08.jpg" alt="图2"></div>
                        <div class="swiper-slide"><img src="images/show_pic_09.jpg" alt="图3"></div>
                        <div class="swiper-slide"><img src="images/show_pic_10.jpg" alt="图4"></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination swiper-pagination2"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- collection里面的swiper插件 -->
    <script>
        var swiper = new Swiper('.swiper2', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination2',
                clickable: true,
            },
            effect: 'fade',
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            }
        });
    </script>
    <!-- 控制collect的轮播 -->
    <!-- Collections结束 -->
    <!-- welcome开始 -->
    <div class="welcome clear">
        <div class="welcome_title">
            <h2>Welcome to Fashionist</h2>
            <div class="wel_title_txt">
                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren<br/>no sea takimata sanctus est Lorem ipsum dolor sit amet. 
            </div>
            <div class="goon">
                <img src="images/goon_icon.jpg" alt="向下图标">
            </div>
        </div>
        <div class="welcome_conent">
            <ul>
                <li><a href="#"><img src="images/show_pic_01.jpg" alt="展示图1"></a></li>
                <li><a href="#"><img src="images/show_pic_02.jpg" alt="展示图2"></a></li>
                <li><a href="#"><img src="images/show_pic_03.jpg" alt="展示图3"></a></li>
                <li><a href="#"><img src="images/show_pic_04.jpg" alt="展示图4"></a></li>
                <li><a href="#"><img src="images/show_pic_05.jpg" alt="展示图5"></a></li>
                <li><a href="#"><img src="images/show_pic_06.jpg" alt="展示图6"></a></li>
            </ul>
        </div>
    </div>
    <!-- welcome结束 -->
    <!-- featured开始 -->
    <div class="featured clear ">
        <h3>featured</h3>
        <ul>
            <li><a href="javascript:void(0)"><img src="images/featured_pic_01.jpg" alt=""></a>
                <div class="featured_icon">
                    <span>
                        <a href="javascript:void(0)">&#xe66e;</a>
                        <a href="javascript:void(0)">&#xe6f7;</a>
                        <a href="javascript:void(0)">&#xe763;</a>
                        <a href="javascript:void(0)">&#xe62c;</a>
                    </span>
                </div>
                <div class="featured_txt">
                    <i>
                        <b><a href="javascript:void(0)">Aviator Blue Sunglasses</b></a><br>
                        <span>$ 149,00</span>
                    </i>
                </div>
                <a href="javascript:void(0)" class="featured_add">&#xe626;</a>
            </li>
            <li><a href="javascript:void(0)"><img src="images/featured_pic_02.jpg" alt=""></a>
                <div class="featured_icon">
                    <span>
                        <a href="javascript:void(0)">&#xe66e;</a>
                        <a href="javascript:void(0)">&#xe6f7;</a>
                        <a href="javascript:void(0)">&#xe763;</a>
                        <a href="javascript:void(0)">&#xe62c;</a>
                    </span>
                </div>
                <div class="featured_txt">
                    <i>
                        <b><a href="javascript:void(0)">Aviator Blue Sunglasses</b></a><br>
                        <span>$ 149,00</span>
                    </i>
                </div>
                <a href="javascript:void(0)" class="featured_add">&#xe626;</a>
            </li>
            <li class="m_right"><a href="javascript:void(0)"><img src="images/featured_pic_03.jpg" alt=""></a>
                <div class="featured_icon">
                    <span>
                        <a href="javascript:void(0)">&#xe66e;</a>
                        <a href="javascript:void(0)">&#xe6f7;</a>
                        <a href="javascript:void(0)">&#xe763;</a>
                        <a href="javascript:void(0)">&#xe62c;</a>
                    </span>
                </div>
                <div class="featured_txt">
                    <i>
                        <b><a href="javascript:void(0)">Aviator Blue Sunglasses</b></a><br>
                        <span>$ 149,00</span>
                    </i>
                </div>
                <a href="javascript:void(0)" class="featured_add">&#xe626;</a>
            </li>
            <li><a href="javascript:void(0)"><img src="images/featured_pic_04.jpg" alt=""></a>
                <div class="featured_icon">
                    <span>
                        <a href="javascript:void(0)">&#xe66e;</a>
                        <a href="javascript:void(0)">&#xe6f7;</a>
                        <a href="javascript:void(0)">&#xe763;</a>
                        <a href="javascript:void(0)">&#xe62c;</a>
                    </span>
                </div>
                <div class="featured_txt">
                    <i>
                        <b>Aviator Blue Sunglasses</b><br>
                        <span>$ 149,00</span>
                    </i>
                </div>
                <a href="#" class="featured_add">&#xe626;</a>
            </li>
            <li><a href="#"><img src="images/featured_pic_05.jpg" alt=""></a>
                <div class="featured_icon">
                    <span>
                        <a href="#">&#xe66e;</a>
                        <a href="#">&#xe6f7;</a>
                        <a href="#">&#xe763;</a>
                        <a href="#">&#xe62c;</a>
                    </span>
                </div>
                <div class="featured_txt">
                    <i>
                        <b><a href="#">Aviator Blue Sunglasses</b></a><br>
                        <span>$ 149,00</span>
                    </i>
                </div>
                <a href="#" class="featured_add">&#xe626;</a>
            </li>
            <li class="m_right"><a href="#"><img src="images/featured_pic_06.jpg" alt=""></a>
                <div class="featured_icon">
                    <span>
                        <a href="#">&#xe66e;</a>
                        <a href="#">&#xe6f7;</a>
                        <a href="#">&#xe763;</a>
                        <a href="#">&#xe62c;</a>
                    </span>
                </div>
                <div class="featured_txt">
                    <i>
                        <b><a href="#">Aviator Blue Sunglasses</b></a><br>
                        <span>$ 149,00</span>
                    </i>
                </div>
                <a href="#" class="featured_add">&#xe626;</a>
            </li>
        </ul>
    </div>
    <!-- featured结束 -->
    <div class="trend clear">
        <div class="trend_left">
            <a href="#"><img src="images/trend_pic_01.jpg" alt="trend图1"></a>
        </div>
        <div class="trend_center">
            <h2>
                We offer the latest</br>
                fashin trends
            </h2>
            <span>IT´S FOR EVERYONE</span>
            <p>
                 At vero eos et accusam et justo duo dolores et ea rebum.Stet </br>
                 sclita kasd gubergren, no sea takimata sanctus est Lorem</br>
                 ipsum dolor sit amet. Lorem ipsum dolor sit amet, </br>
                 sed diam nonumy eirmod diam.</br>
            </p>
            <a href="#">START SHOPPING</a>
        </div>
        <div class="trend_right">
            <a href="#"><img src="images/trend_pic_02.jpg" alt="trend图2"></a>
        </div>
    </div>
    <!-- subscribe开始 -->
    <div class="subscribe clear">
        <span>be the first and get weekly updates</span>
        <div class="sub_input_wrap">
            <input class="sub_input" type="text"><input class="sub_btn" type="button" value="SUBSCRIBE">
        </div>
        
        
    </div>
    
    <!-- subscribe结束 -->
    <!-- footer开始 -->
    <div class="footer clear">
        <div class="footer_top">
            <div class="footer_left">
                <a href="#"><img src="images/logo.png" alt="logo"></a>
                <p class="describe"> 
                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                </p>
                <p class="footer_share clear">
                    <i>&#xe624;</i>
                    <a href="#">TWITTER</a>
                    <i>&#xe79d;</i>
                    <a href="#">FACEBOOK</a>
                    <i>&#xe625;</i>
                    <a href="#">INSTAGRAM</a>
                    <i>&#xe619;</i>
                    <a href="#">PINTEREST</a>
                </p>
            </div>
            <div class="footer_right clear">
                <ul>
                    <li>
                        <a href="#">ABOUT US</a>
                        <span>About Fashionist </span>
                        <span>Careers</span>
                        <span>Journal</span>
                        <span>Investor Relations</span>
                        <span>Our Stores</span>
                    </li>
                    <li>
                        <a href="#">INFORMATION</a>
                        <span>Refund</span>
                        <span>Policy for Buyer</span>
                        <span>Shipping</span>
                        <span>E-Commerce</span>
                        <span>Site map</span>
                    </li>
                    <li>
                        <a href="#">HELP CENTER</a>
                        <span>My Account</span>
                        <span>Delivery</span>
                        <span>Find a store</span>
                        <span>Contact Us</span>
                        <span>FAQs</span>
                    </li>
                    <li>
                        <a href="#">COMPANY</a>
                        <span>Return Policy</span>
                        <span>Privacy Policy</span>
                        <span>Product Warranty</span>
                        <span>Forum</span>
                        <span>Order Tracking</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <span>© 2016 by Fashionist| All rights reserved</span>
            <i>
                <img src="images/pay_01.jpg" alt="支付方式1">
                <img src="images/pay_02.jpg" alt="支付方式2">
                <img src="images/pay_03.jpg" alt="支付方式3">
                <img src="images/pay_04.jpg" alt="支付方式4">
                <img src="images/pay_05.jpg" alt="支付方式5">
            </i>
        </div>
    </div>
    <!-- footer结束 -->
</body>
</html>